<style type="text/css">
    .spec_image{
        display: inline-block;
    }
	.spec_image_item{
	    position: relative;
	    display: inline-block;
	}
	.del-img{
	    position: absolute;
	    background-color: rgba(0,0,0,.5);
	    color: #fff;
	    width: 13px;
	    height: 13px;
	    line-height: 12px;
	    font-size: 10px;
	    display: inline-block;
	    text-align: center;
	    border-radius: 50%;
	    right: -6px;
        top: -6px;
	}
</style>
<table class="layui-table" lay-size="sm">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>默认货品</th>
        <th>图片</th>
        <th>货号</th>
        <th>规格</th>
        <th>库存</th>
        <th><i class="required-color">*</i>销售价</th>
        <th>成本价</th>
        <th>市场价</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    {volist name="items" id="vo" key="key"}
    {if condition="$vo.id"}
    <tr>
        <td>
            <input type="hidden" name="product[{$vo.spec_name}][id]" value="{$vo.product_id}">
            <input type="checkbox" name="product[{$vo.spec_name}][is_defalut]" title="是否默认" value="1" {if condition="$vo['is_defalut'] eq 1"} checked="true"  {elseif condition="$key eq 1 "/}checked="true"{/if} class="isdefalut" lay-filter="isdefalut">
        </td>
        <td class="spec-td">
            <a class="upSpecImage" href="javascript:void(0);">选择图片</a>
            <div class="spec_image"  {if condition="!$vo.image_id" } style="display: none;" {/if}>
                <div class="spec_image_item">
                    <div class="del-img">
                    	x
                    </div>
                    <img src="{$vo.image_id|_sImage}" id="image-{$key}" style="width:60px;height:60px">
                </div>
                <input type="hidden" name="product[{$vo.spec_name}][image_id]"  value="{$vo.image_id}"  >
            </div>
        </td>
        <td>
            <input type="text" name="product[{$vo.spec_name}][sn]" value="{$vo.sn}"  placeholder="货号" autocomplete="off" class="layui-input">
        </td>
        <td>
            {$vo.spec_name}
        </td>
        <td class="have-add-td">
            <input type="text" name="product[{$vo.spec_name}][stock]" value="0"   placeholder="库存" autocomplete="off" class="layui-input goods-stock">
            <input type="checkbox" name="product[{$vo.spec_name}][stock_type]" lay-skin="switch" lay-text="增加|减少" checked>
            <a href="javascript:;" class="help-tip" data-tip="总库存：{$vo.total_stock|default=0}，冻结库存：{$vo.freeze_stock|default=0}"><i class="iconfont icon-wenhao"></i></a>
        </td>
        <td>
            <input type="text" name="product[{$vo.spec_name}][price]" value="{$vo.price}"   placeholder="销售价" autocomplete="off" class="layui-input">
        </td>
        <td>
            <input type="text" name="product[{$vo.spec_name}][costprice]" value="{$vo.costprice}"   placeholder="成本价" autocomplete="off" class="layui-input">
        </td>
        <td>
            <input type="text" name="product[{$vo.spec_name}][mktprice]" value="{$vo.mktprice}"  placeholder="市场价" autocomplete="off" class="layui-input">
        </td>
        <td>
            <a class="layui-btn layui-btn-danger layui-btn-xs del-class" >删除</a>
        </td>
    </tr>
    {else}
        <tr>
            <td>
                <input type="checkbox" name="product[{$vo.spec_name}][is_defalut]" title="是否默认" {if condition="$key == 1 "} checked="true"   {/if}value="1" class="isdefalut" lay-filter="isdefalut">
            </td>
            <td class="spec-td">
                <a class="upSpecImage" href="javascript:;">选择图片</a>
                <div class="spec_image" style="display: none;">
                    <div class="spec_image_item">
                        <div  class="del-img">
                            x
                        </div>
                        <img src="{$vo.image_id|_sImage}" id="image-{$key}" style="width:60px;height:60px">
                    </div>
                    <input type="hidden" name="product[{$vo.spec_name}][image_id]"  value="{$vo.image_id}" >
                </div>
            </td>
            <td>
                <input type="text" name="product[{$vo.spec_name}][sn]"  value="{$vo.sn}" placeholder="货号" autocomplete="off" class="layui-input">
            </td>
            <td>
                {$vo.spec_name}
            </td>
            <td class="have-add-td">
                <input type="text" name="product[{$vo.spec_name}][stock]"   value="0"  placeholder="库存" autocomplete="off" class="layui-input goods-stock">
                <input type="checkbox" name="product[{$vo.spec_name}][stock_type]" lay-skin="switch" lay-text="增加|减少" checked>
                <a href="javascript:;" class="help-tip" data-tip="总库存：{$vo.total_stock|default=0}，冻结库存：{$vo.freeze_stock|default=0}"><i class="iconfont icon-wenhao"></i></a>

            </td>
            <td>
                <input type="text" name="product[{$vo.spec_name}][price]"  value="{$vo.price}"  placeholder="销售价" autocomplete="off" class="layui-input">
            </td>
            <td>
                <input type="text" name="product[{$vo.spec_name}][costprice]"  value="{$vo.costprice}" placeholder="成本价" autocomplete="off" class="layui-input">
            </td>
            <td>
                <input type="text" name="product[{$vo.spec_name}][mktprice]"  value="{$vo.mktprice}"  placeholder="市场价" autocomplete="off" class="layui-input">
            </td>
            <td>
                <a class="layui-btn layui-btn-danger layui-btn-xs del-class" >删除</a>
            </td>
        </tr>
    {/if}
    {/volist}
    </tbody>
</table>

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();
        form.on('checkbox(isdefalut)', function(data){
            if(data.elem.checked){
                var checkedName = $(data.elem).attr("name");
                $(".isdefalut").each(function (i,dom) {
                    var name = $(dom).attr("name");
                    if(name != checkedName){
                        $(dom).attr("checked",false);
                        $(dom).attr("value","0");
                        $("#more_spec .layui-form-checkbox").removeClass('layui-form-checked');
                    }else {
                        $(dom).attr("checked", true);
                        $(dom).attr("value","1");
                    }
                });
                $(data.othis).addClass("layui-form-checked");
            }else{
                $("#more_spec .layui-form-checkbox").first().addClass('layui-form-checked');
                $(".isdefalut").first().attr("checked",true);
                $(".isdefalut").first().attr("value","1");
            }
        });
    });
</script>